<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'userInfo',
      'username',
      'nickname'
    ])
  }
}
</script>
<template>
  <el-card class="box1-card">
    <div slot="header" class="clearfix">
      <i class="el-icon-user-solid" style="color: #2A82E4;" />
      <span style="margin-left:8px;">个人信息</span>
    </div>
    <div class="text item">
      <div class="avatar">
        <img src="../../../../assets/avatar.png" style="width:90px">
      </div>
      <el-descriptions :column="1">
        <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">
          <el-tag v-if="userInfo.userType == '1'" size="small">管理员</el-tag>
          <el-tag v-if="userInfo.userType == '0'" size="small">普通用户</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ nickname }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <span v-if="userInfo.sex == '1'">男</span>
          <span v-if="userInfo.sex == '0'">女</span>
        </el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.box1-card{
  margin-bottom: 17PX;
    min-width: 250px;
    .item{
        .avatar{
            display: flex;
            justify-content: center;
            margin-bottom:20px;
        }
    }
}
</style>

